<template>
    <div>{{ time }}</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

const props = defineProps(['refresh'])
const formatTime = () => {
  var dt = new Date();
  var h = dt.getHours() > 9 ? dt.getHours() : '0' + dt.getHours();
  var m = dt.getMinutes() > 9 ? dt.getMinutes() : '0' + dt.getMinutes();
  var s = dt.getSeconds() > 9 ? dt.getSeconds() : '0' + dt.getSeconds();

  return `${h}:${m}:${s}`;
}

const time = ref(formatTime());
const timer = ref<any>(null);

onMounted(() => {
    if(props.refresh) {
        timer.value = setInterval(() => {
            time.value = formatTime();
        }, 1000);
    }
})
onUnmounted(() => {
    if(timer.value) {
        clearInterval(timer.value);
        timer.value = null;
    }
})
</script>